<template>
	<view class="content">
		<view class="topBox">
			<uni-icons type="gear" size="32" class="setIcon" color="#fff" @click="setFun"></uni-icons>
			<image src="https://img2.woyaogexing.com/2022/06/24/49b73de5f896558f!400x400.jpg" mode="aspectFill"></image>
			<view class="userName">
				<view class="name">
					东郊到家
				</view>
				<view class="desc">
					普通会员
				</view>
			</view>
		</view>

		<view class="listBox">
			<view class="flex flex-sb">
				<view class="item left flex-c-c">
					<view class="flex-1" />
					收藏
					<view class="flex-1" />
					<image src="../../static/svg/favorite.svg" mode="" class="icon-svg"></image>
				</view>
				<navigator url="/pagesA/discounts/discounts" class="item right flex-c-c">
					<view class="flex-1" />
					优惠卷
					<view class="flex-1" />
					<image src="../../static/svg/preferential.svg" mode="" class="icon-svg"></image>
				</navigator>
			</view>
			<navigator url="/pages/order/list" open-type="switchTab" class="link flex-sb mt-20">
				<view class="flex">
					<u-icon name="order" size="20" style="margin-right:5rpx"></u-icon>
					订单管理
				</view>
				<u-icon name="arrow-right"></u-icon>
			</navigator>
			<navigator url="" class="link flex-sb">
				<view class="flex">
					<u-icon name="map" size="20" style="margin-right:5rpx"></u-icon>
					位置管理
				</view><u-icon name="arrow-right"></u-icon>
			</navigator>
			<navigator url="" class="link flex-sb">
				<view class="flex">
					<u-icon name="info-circle" size="20" style="margin-right:5rpx"></u-icon>
					投诉管理
				</view><u-icon name="arrow-right"></u-icon>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				extraIcon1: {
					color: '#666666',
					size: '22',
					type: 'auth'
				},
				extraIcon2: {
					color: '#666666',
					size: '22',
					type: 'cart'
				},
				extraIcon3: {
					color: '#666666',
					size: '22',
					type: 'chatboxes'
				},
				extraIcon4: {
					color: '#666666',
					size: '22',
					type: 'email'
				},
				extraIcon5: {
					color: '#666666',
					size: '22',
					type: 'gift'
				},

			}
		},
		methods: {
			setFun() {
				uni.showToast({
					title: "点击设置",
					icon: "none"
				})
			},
			clickList() {
				uni.showToast({
					title: "点击列表",
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 45vw;
		height: 120rpx;
		background: linear-gradient(to right, #f0fdf4, #f0fdf4);
	}

	.left {
		border-top-left-radius: 20rpx;
	}

	.right {
		border-top-right-radius: 20rpx;
	}

	.icon-svg {
		width: 90rpx;
		height: 90rpx;
		margin-right: 15rpx;
	}

	.content {
		box-sizing: border-box;
		position: relative;
		height: 90vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(#2ed294, #fff 80%);
		box-sizing: border-box;
		overflow: hidden;
	}

	.link {
		font-size: 36rpx;
		padding: 15rpx 0;
		color: #606266;
		border-radius: 10rpx;
	}

	.topBox {
		height: 350rpx;
		padding: 50rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.topBox image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		border: 3rpx solid #fff;
		margin-right: 30rpx;
	}

	.topBox .name {
		font-size: 42rpx;
		color: #fff;
		font-weight: 700;
		margin-bottom: 23rpx;
	}

	.topBox .desc {
		font-size: 24rpx;
		padding: 5rpx;
		color: #ececec;
		background-color: #333;
		border-radius: 20px;
		margin-bottom: 10rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.listBox {
		// height: calc(100% - 630rpx);
		flex: 1;
		background-color: #ffffff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-top: -20rpx;
		padding: 30rpx 20rpx;
	}

	.setIcon {
		position: absolute;
		top: 50rpx;
		right: 50rpx;
	}
</style>